<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-logo">
        <img src="../components/Header/logo/img.png" alt="logo">
      </div>
      <div class="login-form">
        <el-form ref="registerForm" :model="registerForm"
                 :rules="registerRules"
                 class="login-form">
          <el-divider></el-divider>
          <h2 class="title">注册</h2>
          <el-form-item prop="username">
            <el-input
                prefix-icon="el-icon-user"
                type="text"
                placeholder="请输入用户名"
                clearable
                v-model="registerForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="nickname">
          <el-input prefix-icon="el-icon-chat-dot-round" placeholder="昵称(点击右侧获取随机昵称)" clearable v-model="registerForm.nickname">
            <el-button slot="append" icon="el-icon-refresh" type="success" @click="getNickname"></el-button>
          </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                type="password"
                v-model="registerForm.password"
                clearable
                autocomplete="off"
                show-password
                placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
                type="password"
                v-model="registerForm.checkPass"
                clearable
                autocomplete="off"
                show-password
                placeholder="请确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkbox">
            <el-checkbox v-model="registerForm.checkbox">我已阅读并同意<router-link to="TermsPage" target="_blank"> 《服务条款》</router-link></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
                class="button-login"
                type="primary"
                @click="submitForm"
            >注册</el-button>
            <el-button
                class="button-reset"
                type="info"
                @click="resetForm"
            >重置</el-button>
          </el-form-item>
          <div class="tip">
            <div class="tip-1">已有账号？<router-link to="/LoginPage">点此登录</router-link> </div>
            <div class="tip-2">已有账号，<router-link to="">忘记密码</router-link></div>
          </div>
          <el-divider><p>其它方式</p></el-divider>
        </el-form>
        <div class="login-footer">
          <el-button type="text" class="button-1" @click="wechatLogin"><img src="../assets/icon32_wx_logo.png" alt="微信登录"></el-button>
          <el-button type="text" class="button-2" @click="wechatLogin"><img src="../assets/phone.png" alt="手机登录"></el-button>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="router">
        <router-link to="HomePage" style="margin-right: 10px">橙子超市</router-link>
        <router-link to="AboutPage" style="margin-right: 10px">关于本站</router-link>
        <router-link to="TermsPage" style="margin-right: 10px">服务条款</router-link>
      </div>
    </div>
    <el-dialog
        title="其它方式登录"
        center
        :visible.sync="wechatDialog"
        width="20%">
      <h2 style="text-align: center;color: blue">该功能暂时无法使用</h2>
      <el-button type="primary" @click="wechatDialog=false" style="margin-left: 35%">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/axios/axios";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      registerForm:{
        username: '',
        nickname: '',
        password: '',
        checkPass: '',
        checkbox: [],
      },
      wechatDialog: false,

      registerRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "用户名只能包含数字和英文字母(大小写)",
            trigger: "blur",
          },
          { validator: this.noSpacesValidator, trigger: "blur" }, // 添加自定义验证器
        ],
        nickname: [
            { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "长度在 2 到 16 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
            message: "昵称只能包含中英文和数字",
            trigger: "blur",
          },
            { validator: this.noSpacesValidator, trigger: "blur" }, // 添加自定义验证器
        ],
        password: [
          { validator: validatePass, trigger: "blur" },
          {
            required: true,
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
          { validator: this.noSpacesValidator, trigger: "blur" }, // 添加自定义验证器
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          {
            required: true,
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
          { validator: this.noSpacesValidator, trigger: "blur" }, // 添加自定义验证器
        ],
        checkbox: [
            { type: "array", required: true, message: "请认真阅读服务条款", trigger: "change" },
            ]
      }
    }
  },

  methods: {
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.registerForm.resetFields();
      this.$message.info("重置成功");
    },

    /**
     * 提交注册
     */
    submitForm() {
      this.$refs["registerForm"].validate((valid) => {

        const formData = {
          username: this.registerForm.username,
              nickname: this.registerForm.nickname,
              password: this.registerForm.password,
        }

        if (valid) {
          axios.post("/user/page/register", formData).then((response) => {
            if (response.data.code === 0) {
              this.$message.error(response.data.msg);
            } else {
              console.log(response);
              this.$message.success("注册成功");
              this.$router.push("/LoginPage");
            }
          }).catch((error) => {
            console.log(error);
          })
        } else {
          console.log("error submit!");
          return false;
        }
      })
    },

    /**
     * 微信登录
     */
    wechatLogin() {
      this.wechatDialog = true;
    },

    /**
     * 空格校验
     */
    noSpacesValidator(rule, value, callback) {
      if (value && typeof value === "string" && value.includes(" ")) {
        callback(new Error("不能包含空格"));
      } else {
        callback();
      }
    },

    /**
     * 获取随机昵称
     */
    getNickname(){
      axios.get("/common/nickname").then((response) => {
        if (response.data.code === 0) {
          this.$message.error(response.data.msg);
        } else {
        this.registerForm.nickname = response.data.data;
      }
      }).catch((error) => {
        console.log(error);
      })
    },
  }
}
</script>

<style scoped>
.login-page {
  background-image: url("../assets/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column; /* 将主轴改为垂直方向 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.login-container {
  display: flex;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px; /* 添加底部边距 */
}

.login-logo {
  width: 400px;
  background-color: #99a9bf;
  padding: 20px;
}

.footer {
  text-align: center;
  width: 100%;
}

.router {
  font-size: 14px;
  color: #272727;
}

.login-form {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.button-login {
  width: 120px;
  margin-right: 20px;
}

.button-reset {
  width: 120px;
  margin-left: 20px;
}

.title {
  color: #3c3c3c;
}

.tip{
  display: flex;
}

.tip-1, .tip-2 {
  font-size: 13px;
}

.tip-2 {
  margin-left: auto;
}

.login-footer {
  padding-left: 20px;
  padding-right: 20px;
}

.button-1 {
  margin-left: 20px;
  margin-right: 20px;
}

.button-2 {
  margin-left: 20px;
  margin-right: 20px;
}
</style>